<template>
  <view class="work-container">
    <!-- 轮播图（保持不变） -->
    <uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
      <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
        <swiper-item v-for="(item, index) in data" :key="index">
          <view class="swiper-item" @click="clickBannerItem(item)">
            <image :src="item.image" mode="aspectFill" :draggable="false" />
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>

    <!-- 宫格组件（已注释，如需使用请取消注释） -->
    <!-- 
    <uni-section title="学社管理" type="line"></uni-section>
    <view class="grid-body">
      ...
    </view>
    -->

    <!-- 按钮部分，使用Flexbox布局每行两个 -->
    <view class="button-row">
      <CustomButton
        class="custom-button"
        imageSrc="/static/tabs/button1.png"
        text="查看导师"
        url="/pages/ckds/ckds"
      />
      <CustomButton
        class="custom-button"
        imageSrc="/static/tabs/button2.png"
        text="我的导师"
        url="/pages/wdds/wdds"
      />
    </view>
    <view class="button-row">
      <CustomButton
        class="custom-button"
        imageSrc="/static/tabs/button3.png"
        text="我的岗训"
        url="/pages/wdgx/wdgx"
      />
      <CustomButton
        class="custom-button"
        imageSrc="/static/tabs/button4.png"
        text="我的申请"
        url="/pages/wdsq/wdsq"
      />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      swiperDotIndex: 0,
      data: [
        {
          image: '/static/tabs/background.jpg'
        }
        // 其他图片数据可以根据需要添加
      ]
    };
  },
  methods: {
    clickBannerItem(item) {
      console.info(item);
    },
    changeSwiper(e) {
      this.current = e.detail.current;
    },
    // changeGrid(e) { this.$modal.showToast('模块建设中~') } // 如果不使用宫格组件，可以注释或删除此方法
  }
};
</script>

<style lang="scss">
/* 保留原有样式，并添加按钮部分的Flexbox布局 */
page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #fff;
  min-height: 100%;
  height: auto;
}

view {
  font-size: 14px;
  line-height: inherit;
}

.text {
  text-align: center;
  font-size: 26rpx;
  margin-top: 10rpx;
}

.grid-item-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.uni-margin-wrap {
  width: 690rpx;
  width: 100%;
}

.swiper {
  height: 300rpx;
}

.swiper-box {
  height: 150px; /* 注意这里的高度可能与swiper的高度不匹配，需要根据实际情况调整 */
}

.swiper-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  height: 300rpx;
  line-height: 300rpx;
}

@media screen and (min-width: 500px) {
  .uni-swiper-dot-box {
    width: 400px;
    margin: 0 auto;
    margin-top: 8px;
  }
  .image {
    width: 100%;
  }
}

/* 按钮部分的Flexbox布局样式 */
.button-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0; /* 可选：为按钮行添加上下间距 */
}

.custom-button {
  flex: 1; /* 让按钮尽可能平均地占据可用空间 */
  margin: 0 10px; /* 可选：为按钮添加左右间距 */
  /* 其他CustomButton的样式可以根据需要在这里添加 */
}
</style>